<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>输入框</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!-- 
	1.合并组件
		1)	.form-control 						//对input添加
		2)	.inpupt-group-addon 				//对新建span添加(合并组件)
		3)	.input-group 						//对父级容器添加
				.input-group-lg
				.input-group-md(默认)
				.input-group-sm
				没有.input-group-xs

	2.输入框 + 按钮
		1)	输入框 + 按钮
			.input-group 						//最外层容器
			.input-group-btn 					//对button的父级容器添加

	3.输入框 + 按钮式下拉菜单【注意：li每必须嵌套a标签】
		1)	.input-group 						//对最外层容器添加
			2)	.form-control 					//对input添加
			2)	.input-group-btn 				//对button与ul的共同父级容器添加
				3)	.btn 			 			//对button添加
				3)	.btn-default 				//对button添加
				3)	data-toggle="dropdown" 		//对button添加
				3)	.dropdown-toggle 			//对button添加【这一项是使右上角为圆角】
				3)	.caret 						//对新建空span添加
				3)  .dropdown-menu 				//对ul添加

		*可选类)	.dropdown-menu-right 		//对ul添加。下拉菜单向右停靠。还有.dropdown-menu-left
						.dropdown-header 		//对li添加。下拉菜单的标题
						.divider 				//对空li添加。分割线

	4.输入框 + 分裂式按钮下拉菜单【注意：li每必须嵌套a标签】
		只需要在按钮式下拉菜单的基础上，将菜单单独出来，即可
 -->

	<!-- 输入框 + span -->
	<!-- <div class="input-group input-group-lg">
		<input class="form-control" type="text">
		<span class="input-group-addon">@163.com</span>
	</div> -->
	
	<!-- 输入框 + 提交按钮 -->
	<!-- <div class="input-group">
		<input class="form-control" type="text">
		<div class="input-group-btn">
			<button class="btn btn-default">提交</button>
		</div>
	</div> -->

	<!-- 输入框 + 按钮式下拉菜单` -->
	<!-- <div class="input-group">
		<input class="form-control" type="text">
		<div class="input-group-btn">
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				下拉菜单
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu dropdown-menu-left">
				<li class="dropdown-header">标题一</li>
				<li class="divider"></li>
				<li><a href="#">首页</a></li>
				<li><a href="#">资讯</a></li>
				<li><a href="#">产品</a></li>
				<li><a href="#">关于</a></li>
			</ul>
		</div>
	</div> -->
	
	<!-- 输入框 + 分裂式按钮下拉菜单` -->
	<!-- <div class="input-group">
		<input class="form-control" type="text">

		<div class="input-group-btn">
			<button class="btn btn-default btn-group">下拉菜单</button>
			<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu dropdown-menu-left">
				<li class="dropdown-header">标题一</li>
				<li class="divider"></li>
				<li><a href="#">首页</a></li>
				<li><a href="#">资讯</a></li>
				<li><a href="#">产品</a></li>
				<li><a href="#">关于</a></li>
			</ul>
		</div>
	</div> -->
	
	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>